<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/second.css"/>
	</head>
	<body>
		<!--开头-->
		<div class="top">
			<!--第一行 -->
			<div class="first cf">
				<div class="left">
					<div class="left1">composure</div>
					<div class="left2">
						<div>Creative Html template</div>
						<div>Call us toll free: +2 000 123 45 67</div>
					</div>
				</div>
				<div class="right">
					<input type="text" value="Search"  class="search"/>
					<input type="button" class="bg"/>
				</div>
			</div>
			<!--第二行 -->
			<div class="second cf">
	   			<div class="nav">
	   				<ul>
	   						<li><a href="#">Home</a></li>
	   						<li><a href="#">Blog</a></li>
	   						<li><a href="#">Shop</a></li>
	   						<li><a href="#">Services</a></li>
	   						<li><a href="#">Portfolio</a></li>
	   						<li><a href="#">About us</a></li>
	   						<li><a href="#">Contact us</a></li>
	   				</ul>
	  			</div>
				<div class="second-right">
					<div class="origin"><a href="#">Join us</a></div>
					<div class="gray"><a href="#">Login</a></div>
				</div>
			</div>
		</div>
		<!--中间部分 1-->
		<div class="big-tv">
			<div class="left-j"></div>
			<div class="right-j"></div>
			<div class="computer">
				<div class="c-info">
					<p class="info-1">It's beautifully made & performs beautiful.</p>
					<p class="info-2">Loving it is easy, that's why so many people do.</p>
					<p class="info-3">Made from high-quality materials like aluminum and glass, iPad and iPad  <br> 
					mini are exquisitely designed. You can tell just by looking. But from the <br>
					very first touch, you’ll realize there’s much more to them than meets the <br> eye.</p>
					<input type="button" value="Purchase Now" class="info-4"/>
				</div>
			</div>
		</div>
		<div class="join">
			<div class="j-info">
				<div class="info-a"> <span> Join us now </span> &nbsp; &nbsp; &nbsp;" And get your own offer, Get a 30% discount for the first 5 purchases.</div>
			</div>
		</div>
		<!--our services部分-->
		<div class="our">
			<div class="tt1">our services</div> 
			<div class="three-info cf">
				<div class="task">
					<div class="one">Task</div>
					<div class="two">Wachine in which cloth paper, or the like is <br> smoothed, glazed, etc., by pressing between rotat <br> ing cylinders.</div>
					<div class="three">more info</div>
				</div>
				<div class="task">
					<div class="one1">Calender</div>
					<div class="two">Wachine in which cloth paper, or the like is <br> smoothed, glazed, etc., by pressing between rotat <br> ing cylinders.</div>
					<div class="three">more info</div>
				</div>
				<div class="Reminder">
					<div class="one2">Reminder</div>
					<div class="two">Wachine in which cloth paper, or the like is <br> smoothed, glazed, etc., by pressing between rotat <br> ing cylinders.</div>
					<div class="three">more info</div>
				</div>
			</div>
		</div>
		<!--Store 部分-->
		<div class="Store cf">
			<div class="Store-title">Entertainment</div>
			<div class="jiantou">
				<ul>
					<li><a href="#"><img src="img/06.left.png"/></a></li>
					<li><a href="#"><img src="img/07.right.png"/></a></li>
				</ul>
			</div>
		</div>
		<div class="four-s cf">
			<div class="one-s">
				<div><img src="images/05.jpg"/></div>
				<div class="btm">
					<p>River Island Metallic Weave</p>
					<p class="b-info2">$159.00</p>
					<p class="sub">Show Detials</p>
				</div>
			</div>
			<div class="one-s">
				<div><img src="images/01.jpg"/></div>
				<div class="btm">
					<p>River Island Metallic Weave</p>
					<p class="b-info2">$250.00</p>
					<p class="sub">Show Detials</p>
				</div>
			</div>
			<div class="one-s">
				<div><img src="images/07.jpg"/></div>
				<div class="btm">
					<p>River Island Metallic Weave</p>
					<p class="b-info2">$250.00</p>
					<p class="sub">Show Detials</p>
				</div>
			</div>
			<div class="two-s">
				<div><img src="images/10.jpg"/></div>
				<div class="btm">
					<p>River Island Metallic Weave</p>
					<p class="b-info2">$250.00</p>
					<p class="sub">Show Detials</p>
				</div>
			</div>
		</div>
		<!--Recent 部分-->
		<div class="recent cf">
			<div class="recent-title">Recent Projects</div>
			<div class="recent-nar cf">
				<ul>
					<li class="nar-r1"><a href="#">Photography</a></li>
					<li class="nar-r"><a href="#">Digital Art</a></li>
					<li class="nar-r"><a href="#">Web Design</a></li>
					<li class="nar-r2"><a href="#">Advertising</a></li>
				</ul>
			</div>
		</div>
		<!--Recent 四个小的-->
		<div class="four-recent cf">
			<div class="four-info1">
				<div class="four-1">
					<div><img src="images/01.jpeg"/></div>
					<div class="info-f">
						<p class="big">The queen of spades</p>
						<p class="small">April 4, 2013  |  Photography</p>
					</div>
				</div>
				<div class="four-2">
					<div><img src="images/04.jpeg"/></div>
					<div class="info-f">
						<p class="big">The queen of spades</p>
						<p class="small">April 4, 2013  |  Photography</p>
					</div>
				</div>
			</div>
			<div class="four-info2">
				<div class="four-3">
					<p class="big1">The queen of spades</p>
					<p class="small1">April 4, 2013  |  Photography</p>
					<p class="more">Nunc placerat sapien a ligula sagittis eu rhoncus tortor tincidunt. <br> 
						Nam facilisis tincidunt ligula, a accumsan risus convallis id. Integer iaculis dignissim eros in accumsan. Quisque ut <br> 
						risus tortor. Pellentesque vitae leo sit amet massa rutrum porttitor. Morbi eu justo eget risus <br> 
						commodo tempus. Nam erat nisl, mollis non vehicula in, feugiat a tortor. Nunc quis lectus <br> 
						eros. Mauris interdum quam nec ligula egestas dictum. Duis non eros mauris, id porttitor <br> 
						enim.
					</p>
				</div>
				<div class="four-4">
					<div><img src="images/08.png"/></div>
					<div class="info-f">
						<p class="big">The queen of spades</p>
						<p class="small">April 4, 2013  |  Photography</p>
					</div>
				</div>
			</div>
			<div class="list">
				<div class="red"></div>
			</div>
		</div>
		<!--Recent Posts 部分-->
		<div class="post-title">Recent Posts</div>
		<div class="post-info cf">
			<div class="p-info1"></div>
			<div class="p-info2"><img src="images/09.jpeg"/></div>
			<div class="p-info3">
				<p class="p-show">Example to show you latest post from blog.</p>
				<p class="p-time">Posted on <span>April 5, 2013</span>  by <span>M-elgendy</span>  - 13 comments</p>
				<p class="p-info">Morbi pretium gravida justo nec ultrices. Ut et facilisis justo. Fusce ac turpis eros, vel molestie lectus. Fusce a ante risus, ac pellentesque nisi Vestibulum <br>
				 sagittis lorem ut tortor tincidunt fringilla...</p>
				<input type="submit" value="Continue Reading" class="p-sum"/>
			</div>
			<div class="p-info4"></div>
		</div>
		<!--Client Testimonials 部分-->
		<div class="Client cf">
			<div class="Client-left">
				<div class="Client-title">Client Testimonials</div>
				<div class="Client-three1 cf">
					<div class="Client-one">
						<div class="one-info">Morbi pretium gravida justo nec ultrices. <br>
						Ut et facilisis justo. Fusce ac turpis eros, <br> 
						vel molestie  lectus.</div>
						<div class="sanjiao"></div>
						<div class="sanjiao1"></div>
					</div>
					<div class="Client-one">
						<div class="one-info">Morbi pretium gravida justo nec ultrices. <br>
						Ut et facilisis justo. Fusce ac turpis eros, <br> 
						vel molestie  lectus.</div>
						<div class="sanjiao"></div>
						<div class="sanjiao1"></div>
					</div>
					<div class="Client-two">
						<div class="two-info">Morbi pretium gravida justo nec ultrices. <br>
						Ut et facilisis justo. Fusce ac turpis eros, <br> 
						vel molestie  lectus.</div>
						<div class="sanjiao"></div>
						<div class="sanjiao1"></div>
					</div>
				</div>
				<div class="Client-three2 cf">
					<div class="c-one cf">
						<div><img src="images/03.jpeg"/></div>
						<div class="c-info">
							<p class="c-info1">Henry Sherman</p>
							<p class="c-info2">Bakersfield, MI 95261</p>
						</div>
					</div>
					<div class="c-one cf">
						<div><img src="images/04.jpeg"/></div>
						<div class="c-info">
							<p class="c-info1">Henry Sherman</p>
							<p class="c-info2">Bakersfield, MI 95261</p>
						</div>
					</div>
					<div class="c-two cf">
						<div><img src="images/09.jpeg"/></div>
						<div class="c-info">
							<p class="c-info1">Henry Sherman</p>
							<p class="c-info2">Bakersfield, MI 95261</p>
						</div>
					</div>
				</div>
			</div>
			<div class="Client-right">
				<div class="right-info1">
					<p>Nulla molestie libero sit amet sem ullamcorper sit</p>	
					<p>amet mattis sem bibendum.</p>
					<p>M-Elgendy - April 5, 2013</p>
				</div>
				<div class="right-info2">Twitter</div>
			</div>
		</div>
		<!--最后部分-->
		<div class="last">
			<div class="last-top">
				<div class="top1 cf">
					<div class="ul">
						<p class="dt">About Company</p>
						<p class="dd">Nullam ut commodo velit. Quisque sit amet arcu nisi. Sed</p>
						<p class="dd">id massa et mauris lacinia condimentum. In luctus suscipit</p> 
						<p class="dd">laoreet. Suspendisse a arcu quis neque tincidunt posuere </p>
						<p class="dd">sagittis ac lacus. Aenean tristique accumsan ipsum vitae </p>
						<p class="dd">molestie. Etiam vulputate.</p>
					</div>
					<div class="ul1">
						<p class="dt1">Support</p>
						<p class="dd1">Support home</p>
						<p class="dd1">Surface Support</p>
						<p class="dd1">Knowledge base</p>
					</div>
					<div class="ul1">
						<p class="dt1">Downloads</p>
						<p class="dd1">Microsoft Office</p>
						<p class="dd1">Windows 8</p>
						<p class="dd1">Skype</p>
						<p class="dd1">Surface User Guide</p>
					</div>
					<div class="ul1">
						<p class="dt1">Support</p>
						<p class="dd1">Support home</p>
						<p class="dd1">Surface Support</p>
						<p class="dd1">Knowledge base</p>
					</div>
				</div>
			</div>
			<div class="last-bottom">
				<div class="bottom1 cf">
					<div class="copy" >&copy; 2013 M-elgendy - All rights reserved.</div>
					<div class="logo cf">
						<ul>
							<li><a href="#"><img src="img/icon.f.png"/></a></li>
							<li><a href="#"><img src="img/icon.fly.png"/></a></li>
							<li><a href="#"><img src="img/icon.g+.png"/></a></li>
							<li><a href="#"><img src="img/icon.last.png"/></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
